<template>
    <div class="d-page" v-if="visiabled">
        <div class="goods-info">
            <div class="d-goods-title td-fec">
                <div class="chooses">选择规格</div>
                <img :src="$global.Image.icon_close" @click="close" />
            </div>
            <div class="content-box td-fss">
                <div class="left">
                    <div class="big-img">
                        <img v-show="image_base" :src="image_base" />

                    </div>
                    <div class="info td-f1 td-fc" :class="{transparent: loading}" style="margin-left:20px">
                        <div class="name">{{ storeInfo.store_name }}{{ storeInfo.store_name }}{{ storeInfo.store_name }}</div>
                        <div class="operating td-f1">
                            <div class="info-item">
                                <div>
                                    <span class="price">
                                        <small>￥</small>
                                        {{ price }}
                                    </span>
                                    <!-- <del>￥{{ ot_price }}</del> -->
                                </div>
                            </div>
                            <div class="info-item">
                                <label>库存：</label>
                                <div>{{ stock > 10000 ? "10000+" : stock }}</div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="info">
                    <div class="operating">
                        <!-- 商品属性 -->
                        <div class="info-item" style="display:block" v-for="(item, index) in goodsAttr" :key="index">
                            <label>{{ item.attr_name }}：</label>
                            <div class="attribute td-fss td-warp" style="margin-top: 14px;">
                                <span class="td-fcc" :class="{ active: attr.check }" v-for="(attr, idx) in item.attr_value" :key="idx" @click="_selectGoodsAttr(index, idx)">{{ attr.attr }}</span>
                            </div>
                        </div>
                        <!-- 商品属性 end-->
                        <div class="info-item">
                            <label>数量：</label>
                            <div>
                                <el-input-number v-model="num" size="mini" :min="1" :max="stock" label="描述文字"></el-input-number>
                            </div>
                        </div>
                    </div>
                    <div class="btn-box td-f">
                        <Btn :loading="true" class="btn-r" v-if="isStock" @confirmEvent="_joinCart">确定</Btn>
                        <!-- <Btn :loading="true" class="btn-r" v-if="isStock" @confirmEvent="updateCart">确定</Btn> -->
                    </div>
                </div>
                <img class="loading" :src="$global.Image.loading" v-if="loading" />
            </div>
        </div>
        <div class="d-shade"></div>
    </div>
</template>

<script>
import Star from "@components/Star";
import { articleDetail } from "@utils/demo.js";
import {
    getProductDetail,
    postCartAdd,
    getCartCount,
    getProductCode,
    storeListApi,
    getReplyConfig,
    getReplyList,
    cartAttrEdit
} from "@api/store";
import {
    getCoupon,
    getCollectAdd,
    getCollectDel,
    getUserInfo,
} from "@api/user";
import { mapGetters } from "vuex";
let NAME = "addGoodsCon";

export default {
    name: NAME,
    components: {
        "v-star": Star,
    },
    data() {
        return {
            visiabled: false,
            loading: false,
            id: "",
            ot_price: 0,
            price: 0,
            stock: 0,
            isStock: true,
            num: 1,
            slideIndex: 1,
            activeName: "first",
            goodsContent: "",
            isCollect: false,
            storeInfo: {},
            replyChance: 0,
            replyCount: 0,
            activity: [],
            goodsAttr: [],
            goodsAttrVal: {},
            selectedAttr: [],
            selectedAttrVal: [],
            slider_image: [],
            image_base: "",
            starNum: "",
            // 放大图片
            showImgStyle: {
                width: 480 * 3,
                height: 480 * 3,
                top: 0,
                left: 0,
                scale: 3,
            },
            showMouseBox: {
                width: 480 / 3,
                height: 480 / 3,
                top: 0,
                left: 0,
            },
            callback: "",
            cart_id: '',
        };
    },
    computed: mapGetters(["isLogin"]),
    methods: {
        show(item, cb) {
            let id = item.product_id
            if (cb) {
                this.callback = cb;
            } else {
                this.callback = "";
            }
            this.cart_id = item.id
            this.id = id;
            this.productCon();
            this.loading = true;
            this.visiabled = true;
            document.body.style.cssText = "height: 100vh;overflow:hidden";
        },
        close() {
            this.visiabled = false;
            document.body.style.cssText = "height: auto;overflow:auto";
        },
        // 获取商品详情
        productCon() {
            let that = this;
            getProductDetail(that.id)
                .then((res) => {
                    this.storeInfo = res.data.storeInfo;
                    window.document.title = this.storeInfo.store_name;
                    this.isCollect = this.storeInfo.userCollect;
                    this.image_base = this.storeInfo.image_base;
                    this.formatImg(this.storeInfo.slider_image);
                    that.replyCount = res.data.replyCount;

                    that.activity = res.data.activity ? res.data.activity : [];
                    this.goodsContent = this.storeInfo.description;
                    this.goodsAttr = res.data.productAttr;
                    this.goodsAttrVal = res.data.productValue;
                    this.ot_price = this.storeInfo.ot_price;
                    this.price = this.storeInfo.price;
                    this.stock = this.storeInfo.stock;
                    this.isStock = !!this.stock;
                    this.loading = false;
                })
                .catch((res) => {
                    that.$dialog.error(res.msg);
                    that.$router.go(-1);
                });
        },
        formatImg(imgs) {
            let num = 6;
            let list = imgs;
            let group = [];
            let count = Math.ceil(list.length / num);
            for (let i = 0; i < count; i++) {
                var item = list.slice(i * num, i * num + num);
                if (item.length) group.push({ list: item });
            }
            this.slider_image = group;
        },
        // 显示大图
        _showGoodsImage(item) {
            this.image_base = item;
        },
        // 选择属性
        _selectGoodsAttr(key1, key2) {
            let goodsAttr = this.goodsAttr[key1].attr_value;
            goodsAttr.map((item) => {
                item.check = false;
            });
            this.goodsAttr[key1].attr_value[key2].check = true;
            this._checkStore();
        },
        // 查看库存/价格
        _checkStore() {
            let data = this.goodsAttr;
            let attr = [];
            for (let i = 0; i < data.length; i++) {
                for (let j = 0; j < data[i].attr_value.length; j++) {
                    if (data[i].attr_value[j].check) {
                        attr.push(data[i].attr_value[j].attr);
                    }
                }
            }
            this.selectedAttr = attr;
            if (this.selectedAttr.length == this.goodsAttr.length) {
                let key = attr.join(",");
                this.selectedAttrVal = this.goodsAttrVal[key];
                this.ot_price = this.selectedAttrVal.ot_price;
                this.price = this.selectedAttrVal.price;
                this.stock = this.selectedAttrVal.stock;
                this.isStock = !!this.stock;
                if (this.isStock) {
                    if (this.num > this.stock) {
                        this.num = this.stock;
                    }
                }
            }
        },
        // 初始化属性选择
        _initGoodsAttr() {
            if (this.goodsAttr && this.goodsAttr.length > 0) {
                let data = this.goodsAttr;
                for (let i = 0; i < data.length; i++) {
                    for (let j = 0; j < data[i].attr_value.length; j++) {
                        data[i].attr_value[j].check = false;
                    }
                }
                this.selectedAttr = [];
            }
            this.ot_price = this.storeInfo.ot_price;
            this.price = this.storeInfo.price;
            this.stock = this.storeInfo.stock;
            this.isStock = !!this.stock;
        },
        // 修改购物车
        updateCart (done) {
            let that = this
            if (this.selectedAttr.length != this.goodsAttr.length) {
                that.$dialog.toast({ mes: "请选择商品属性" });
                done();
                return;
            }
            if (that.num == 0) {
                that.$dialog.toast({ mes: "请输入购买数量" });
                done();
                return;
            }
            //如果有属性,没有选择,提示用户选择
            if (parseInt(that.stock) == 0 || that.num > parseInt(that.stock)) {
                that.$dialog.toast({ mes: "产品库存不足!" });
                done();
                return;
            }
            let params = {
                cart_id: that.cart_id,
                num: that.num,
                unique: that.selectedAttrVal.unique || "",
            }
            cartAttrEdit(params).then(res=>{
                done()
                if (res.status == 200) {
                    that.callback(res.data)
                } else {
                    that.$dialog.toast({ mes: res.msg });
                }
            }).catch(err=>{
                done()
                if (err.msg) {
                    that.$dialog.toast({ mes: err.msg });
                } else {
                    that.$dialog.toast({ mes: err.msg });
                }
            })
        },
        // 点击加入购物车按钮
        _joinCart(done) {
            this.goCat(1, done);
        },
        // 加入购物车；0=加入购物车、1=直接购买
        goCat(news, done) {
            let that = this;
            if (this.selectedAttr.length != this.goodsAttr.length) {
                that.$dialog.toast({ mes: "请选择商品属性" });
                done();
                return;
            }
            if (that.num == 0) {
                that.$dialog.toast({ mes: "请输入购买数量" });
                done();
                return;
            }
            //如果有属性,没有选择,提示用户选择
            if (parseInt(that.stock) == 0 || that.num > parseInt(that.stock)) {
                that.$dialog.toast({ mes: "产品库存不足!" });
                done();
                return;
            }
            let params = {
                productId: that.id,
                cartNum: that.num,
                new: news,
                uniqueId: that.selectedAttrVal.unique || "",
            };
            postCartAdd(params)
                .then((res) => {
                    done();
                    that._initGoodsAttr();
                    that.callback(res.data)
                    that.close();
                })
                .catch((err) => {
                    done();
                    if (err.msg) {
                        that.$dialog.toast({ mes: err.msg });
                    }
                });
        },
        //获取购物车数量
        getCartCount(isAnima) {
            let that = this;
            const isLogin = that.isLogin;
            if (isLogin) {
                getCartCount({ numType: 0 }).then((res) => {
                    that.CartCount = res.data.count;
                    //加入购物车后重置属性
                    if (isAnima) {
                        that.animated = true;
                        setTimeout(function () {
                            that.animated = false;
                        }, 500);
                    }
                });
            }
        },
        //收藏商品
        _setCollect() {
            let that = this,
                id = that.id,
                category = "product";
            if (that.storeInfo.userCollect) {
                getCollectDel(id, category).then(function () {
                    that.storeInfo.userCollect = !that.storeInfo.userCollect;
                    that.isCollect = that.storeInfo.userCollect;
                });
            } else {
                getCollectAdd(id, category).then(function () {
                    that.storeInfo.userCollect = !that.storeInfo.userCollect;
                    that.isCollect = that.storeInfo.userCollect;
                });
            }
        },
        // 放大
        mousemove(e) {
            let data = this.$refs.bigImg.getBoundingClientRect();
            let mouseX1 = e.clientX - data.left;
            let mouseY1 = e.clientY - data.top;
            if (mouseX1 < 80) {
                mouseX1 = 80;
            }
            if (mouseX1 > 400) {
                mouseX1 = 400;
            }
            if (mouseY1 < 80) {
                mouseY1 = 80;
            }
            if (mouseY1 > 400) {
                mouseY1 = 400;
            }
            let scale = this.showImgStyle.scale;
            this.showImgStyle.left = mouseX1 * scale * -1 + 240;
            this.showImgStyle.top = mouseY1 * scale * -1 + 240;
            this.showMouseBox.left = mouseX1 - 80;
            this.showMouseBox.top = mouseY1 - 80;
        },
    },
};
</script>
<style >
.btn-r {
    width: 346px !important;
    margin: 0 auto !important;
}
</style>
<style scoped  lang="scss" scoped>
$color: #da213d;
$bgColor: #da213d;
.d-goods-title {
    height: 50px;
    border-bottom: solid #eee 1px;
    margin-bottom: 20px;
    padding: 0 20px;
    background: #fbf0f0;
    .chooses {
        font-size: 21px;
        font-weight: bold;
        text-align: center;
        width: 100%;
        color: #da213d;
        line-height: 50px;
    }
    img {
        display: block;
        height: 22px;
        width: 22px;
        object-fit: contain;
        cursor: pointer;
    }
}
.d-shade {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99;
    background-color: rgba($color: #000000, $alpha: 0.66);
}
.goods-info {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 700px;
    transform: translate(-50%, -50%);
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 0 20px rgba($color: #000000, $alpha: 0.2);
    border-radius: 4px;
    max-height: 90%;
    overflow-y: auto;
    .content-box {
        padding: 0 30px 30px;
        display: block;
    }
    .content-box .transparent {
        opacity: 0;
    }
    .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .left {
        display: flex;
        .big-img {
            width: 140px;
            height: 140px;
            background-color: #eee;
            position: relative;
            .mouse-box {
                display: none;
                position: absolute;
                width: 160px;
                height: 160px;
                background-color: rgba($color: #ffffff, $alpha: 0.6);
            }
            img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover;
            }
            .show-img {
                display: none;
                width: 480px;
                height: 480px;
                position: absolute;
                left: 500px;
                top: 0;
                z-index: 10;
                background-color: #eee;
                box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.2);
                .position-box {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                    img {
                        display: block;
                        position: absolute;
                    }
                }
            }
        }
        .big-img:hover {
            .show-img,
            .mouse-box {
                display: block;
            }
        }
        ::v-deep .el-carousel__arrow {
            border-radius: 0;
            height: 60px;
            width: 24px;
        }
        ::v-deep .el-carousel__arrow--right {
            right: 0;
        }
        ::v-deep .el-carousel__arrow--left {
            left: 0;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            margin: 20px auto;
            width: 410px;
            li {
                width: 60px;
                height: 60px;
                margin-right: 10px;
                box-sizing: border-box;
                border: solid #eee 1px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            li:nth-child(6) {
                margin-right: 0;
            }
            li.active {
                box-sizing: border-box;
                border: solid #014a97 4px;
            }
        }
    }
    .info {
        // margin-left: 40px;
        // height: 560px;
        .name {
            font-size: 24px;
            line-height: 36px;
            font-weight: 700;
            color: #333333;
            max-height: 72px;
            // margin-bottom: 20px;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .operating {
            padding-top: 10px;
            // border-top: solid #eee 1px;
            // border-bottom: solid #eee 1px;
            // min-height: 380px;
            overflow-y: auto;
            .info-item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 20px;
                line-height: 30px;
                .price {
                    font-size: 24px;
                    font-weight: 600;
                    color: $color;
                    padding-right: 20px;
                }
                del {
                    font-size: 14px;
                    line-height: 24px;
                    color: #999;
                }
                label {
                    display: block;
                    width: 60px;
                    font-size: 16px;
                    color: #666;
                    font-weight: bold;
                }
                > div {
                    display: flex;
                    font-size: 14px;
                    color: #333;
                    flex: 1;
                }
            }
            .attribute {
                span {
                    color: #999999;
                    height: 32px;
                    background: #f6f6f6;
                    height: 32px;
                    padding: 0 30px;
                    border-radius: 16px;
                    border: solid #f6f6f6 1px;
                    background-color: f3f3f3;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    cursor: pointer;
                }
                span:hover {
                    border-color: $bgColor;
                }
                span.active {
                    color: #da213d;
                    background: #fdf4f3;
                    border: 1px solid #da213d;
                    // background-color: $bgColor;
                }
            }
        }
        .btn-box {
            margin-top: 20px;
        }
    }
    .right {
        padding-top: 60px;
        margin-left: 40px;
        .score {
            padding: 20px 10px;
            box-shadow: 0 5px 10px rgba($color: #000000, $alpha: 0.2);
            border-radius: 6px;
            cursor: pointer;
            .icon {
                display: block;
                width: 46px;
                height: 46px;
            }
            .tit {
                font-size: 14px;
                font-weight: 600;
                color: #014a97;
                margin-top: 40px;
            }
            .star-box {
                margin-top: 10px;
            }
            .num {
                font-size: 16px;
                color: #014a97;
                margin-top: 10px;
            }
        }
    }
}

.btn-r,
.btn-grey,
.btn-b {
    width: 150px;
    height: 57px;
    font-size: 16px;
    margin-right: 20px;
}
.btn-r {
    background-color: #da213d !important;
    font-size: 18px;
    color: #ffffff !important;
}
.btn-b {
    background-color: #da213d !important;
    border: 0 !important;
    font-size: 18px;
    color: #ffffff !important;
}
.collect-btn {
    width: 150px;
    height: 57px;
    font-size: 16px;
    margin-right: 20px;
    border: solid #dbdbdb 1px;
    box-sizing: border-box;
    cursor: pointer;
}

.collect-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 6px;
}
</style>